<template>
  <!-- 占位 -->
  <div :style="heightStyle"></div>
  <div :class="`bottom-btn-wrap ${align}`" ref="bottomBtnWrap">
    <slot></slot>
  </div>
</template>

<script lang='ts' setup>
import { onMounted } from 'vue'
defineProps({
  align: {
    type: String,
    default: 'center'
  }
});
const bottomBtnWrap = ref<HTMLElement | null>(null);
const heightStyle = ref('');
onMounted(async () => {
  await nextTick(); // 确保 DOM 已经更新
  if (bottomBtnWrap.value) {
    const height = bottomBtnWrap.value.offsetHeight;
    heightStyle.value = `height: ${height}px`;
  }
});
</script>


<style scoped lang='scss'>
/** 用于底部固定按钮样式 */
.bottom-btn-wrap {
  position: fixed;
  bottom: 0;
  padding: 10px 30px;
  right: 0;
  display: flex;
  align-items: center;
  left: 0;
  background-color: #fff;
  border-top: 20px solid #f0f2f5;
  z-index: 200;
  margin-left: $sidebar-width !important;
  transition: margin-left 0.28s;
  &.center {
    justify-content: center;
  }
  &.left {
    justify-content: flex-start;
  }
  &.right {
    justify-content: flex-end;
  }
}
// 侧边栏收缩时，底部固定按钮位置也收缩
.is-has-sub-sidebar {
  .bottom-btn-wrap {
    margin-left: calc($sidebar-width + $sub-sidebar-width) !important;
  }
}
.hideSidebar {
  .is-has-sub-sidebar {
    .bottom-btn-wrap {
      margin-left: calc($sidebar-width-collapsed + $sub-sidebar-width) !important;
    }
  }
  .bottom-btn-wrap {
    margin-left: $sidebar-width-collapsed !important;
  }
}
</style>
